import { faker } from "@faker-js/faker";
import { createSignal } from "solid-js";
import Button from "../components/Button";
import DisplayName from "../components/DisplayName";

export default function ComputedDemo() {
  const [firstName, setFirstName] = createSignal("F");
  const [lastName, setLastName] = createSignal("L");

  const handleChange = () => {
    setFirstName(faker.person.firstName());
    setLastName(faker.person.lastName());
  };

  return (
    <div>
      <DisplayName firstName={firstName()} lastName={lastName()} />
      <Button onClick={handleChange}>Change</Button>
    </div>
  );
}
